{% extends "layout.html" %}
{% load static %}

{% block CSS %}
    <title>主页</title>
    <link rel="stylesheet" href="{% static 'css/homepage.css' %}">
{% endblock %}

{% block content %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .zy-outer {
            position: relative;
            margin: 0px auto;
            width: 90%;
            height: 400px;
            overflow: hidden;

        }

        .zy-outer .on {
            background-color: #bfa !important;
        }

        .zy-outer .inner {
            position: relative;
            /* 此处输入一张图片宽度的负值(起始位置)*/
            left: -1600px;
            /* 总宽度 = 图片个数 * 一张图片宽度 */
            width: 11200px;
            height: 600px;
        }

        .zy-outer li {
            font-size: 50px;
            text-align: center;
            list-style: none;
            /* 图片盒子宽度 */
            width: 1600px;
            height: 600px;
            line-height: 150px;
            float: left;
        }


        .zy-outer .ctrlCircle {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%);

        }

        .zy-outer .ctrlCircle span {
            cursor: pointer;
            border-radius: 50%;
            margin-right: 5px;
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: red;
        }

        .zy-outer .left {
            cursor: pointer;
            z-index: 2;
            position: absolute;
            top: 50%;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .zy-outer .right {
            cursor: pointer;
            z-index: 2;
            position: absolute;
            top: 50%;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }


        .zy-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3列，每列占据1/3空间 */
            gap: 10px; /* 格子之间的间隙 */
            width: 100%;
            overflow: hidden;
            white-space: nowrap;


        }

        .zy-grid .box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.0em;
            overflow: hidden; /* 文字大小 */
            margin-left: 10%;
            width: 80%;
        }


        #zy-page-container {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.01s ease-in-out;
        }

        #zy-page-container .face {
            width: 300px;
            height: 300px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 5px solid #fff;
            box-sizing: border-box;
            transform: translate3d(0, 0, 150px);
        }

        /* 设置前面板样式 */
        #zy-page-container .front {
            background-image: url("{% static 'images/resource/desktop_1.jpg' %}");
            transform: rotateY(0deg) translateZ(150px);
        }

        /* 设置后面板样式 */
        #zy-page-container .back {
            background-image: url("{% static 'images/resource/desktop_2.jpg' %}");
            transform: rotateY(180deg) translateZ(150px);
        }

        /* 设置上面板样式 */
        #zy-page-container .top {
            background-image: url("{% static 'images/resource/desktop_3.jpg' %}");
            transform: rotateX(-90deg) translateZ(150px);
        }

        /* 设置底面板样式 */
        #zy-page-container .bottom {
            background-image: url("{% static 'images/resource/desktop_4.jpg' %}");
            transform: rotateX(90deg) translateZ(150px);
        }

        /* 设置左面板样式 */
        #zy-page-container .left {
            background-image: url("{% static 'images/resource/desktop_5.jpg' %}");
            transform: rotateY(-90deg) translateZ(150px);
        }

        /* 设置右面板样式 */
        #zy-page-container .right {
            background-image: url("{% static 'images/resource/desktop_6.jpg' %}");
            transform: rotateY(90deg) translateZ(150px);
        }

        canvas {
            display: block;
            width: 600px;
            height: 622px;
            background-color: black;
        }

        @media (max-width: 768px) {
            .zy-grid .boxa1, img {
                width: 100%;
                height: 400px;
            }

            .zy-grid .boxa2 {
                width: 100%;
                height: 400px;
            }

            .zy-grid .boxa3 {
                width: 100%;
                height: 400px;
            }

            .zy-grid .wenzi {
                font-size: 16px;
            }

            .biaoti {
                font-size: 20px;

            }
        }
    </style>

    <div class="zy-outer">
        <!-- 切换按钮 -->
        <span class="left"><</span>
        <span class="right">></span>
        <ul class="inner">
            <li><img src="{% static 'images/resource/嵌入式.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/前端.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/网络安全工程师.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/API设计和开发.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/数据库管理.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/嵌入式.jpg' %}" height="600px" width="1600px"></li>
            <li><img src="{% static 'images/resource/前端.jpg' %}" height="600px" width="1600px"></li>
        </ul>

        <!-- 小圆点 -->
        <div class="ctrlCircle">
            <span class="on" index="1"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
    </div>



    <h1 class="biaoti" style="margin-left: 45%;overflow: hidden;white-space: nowrap;margin-top: 2em ">前端工作内容</h1>
    <div class="zy-grid">
        <div class="box boxa1"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/网页布局.jpg' %}"
                              alt=""></div>
        <div class="box boxa2">
            <canvas id="zy-myCanvas"></canvas>
        </div>
        <div class="box boxa3">
            <div id="zy-page-container">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
        </div>
        <div class="box wenzi" style="margin-top: 1em">网页布局</div>
        <div class="box wenzi" style="margin-top: 1em">动态页面</div>
        <div class="box wenzi" style="margin-top: 1em">3D效果</div>
    </div>
    <hr style="font-size: 1em">
    <h1 class="biaoti" style="margin-left: 46%;overflow: hidden; white-space: nowrap;margin-top: 2em  ">后端工作内容</h1>
    <div class="zy-grid">
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/数据库管理.jpg' %}"
                              alt=""></div>
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/API设计和开发.jpg' %}"
                              alt=""></div>
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/网络安全工程师.jpg' %}"
                              alt=""></div>
        <div class="box wenzi" style="margin-top: 1em">数据库管理</div>
        <div class="box wenzi" style="margin-top: 1em">API设计和开发</div>
        <div class="box wenzi" style="margin-top: 1em">网络安全工程师</div>
    </div>
    <hr>
    <h1 class="biaoti" style="margin-left: 45%;overflow: hidden;white-space: nowrap;margin-top: 2em ">嵌入式工作内容</h1>
    <div class="zy-grid">
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/嵌入式系统设计.jpg' %}"
                              alt=""></div>
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/嵌入式软件开发.jpg' %}"
                              alt=""></div>
        <div class="box"><img style="width: 100%;height: 80%;" src="{% static 'images/resource/嵌入式系统安全.jpg' %}"
                              alt=""></div>
        <div class="box wenzi" style="margin-top: 1em">嵌入式系统设计</div>
        <div class="box wenzi" style="margin-top: 1em">嵌入式软件开发</div>
        <div class="box wenzi" style="margin-top: 1em">嵌入式系统安全</div>
    </div>

    <script>
        const inner = document.querySelector(".inner")
        //左边切换按钮
        const right = document.querySelector(".left")
        //右边切换按钮
        const left = document.querySelector(".right")
        //所有圆点
        const ctrlCircle = document.querySelectorAll(".ctrlCircle span")
        //原点的盒子(用来添加点击事件)
        const circleContaniner = document.querySelector(".ctrlCircle")
        //图片宽度
        var imgWidth = 1600
        //此处输入一张图片的负值代表滚动到的位置
        var initLeft = -imgWidth
        //图片总数量
        var sumImg = 5
        //滚动一张图片的间隔
        var steptTime = 2000
        //自动滚动定时器
        var Scrolltimer
        //初始过渡动画
        inner.style.transition = "1s"
        //当前小圆点
        var thisCircle = 0
        //操作后重新启动定时器的时间
        var clickAfterTime = 3000
        //滚动函数
        var autoScroll = () => {
            for (let i = 0; i < ctrlCircle.length; i++) {
                ctrlCircle[i].className = "null"
            }
            thisCircle = -(initLeft / imgWidth)
            // if ()
            if (thisCircle >= 5) thisCircle = 4
            ctrlCircle[thisCircle].className = "on"
            initLeft -= imgWidth
            if (initLeft < (sumImg) * -imgWidth) {
                //迅速切换到第一张图片并把动画置为0s
                initLeft = 0
                inner.style.transition = "0s"
//此定时器用来控制切换完图片后重新加上过度动画
                var animaAgain = setTimeout(() => {
                    inner.style.transition = "1s"
                    Scrolltimer = setInterval(autoScroll, steptTime)
                }, 50)
                clearInterval(Scrolltimer)
            }
            inner.style.left = initLeft + "px"
        }
        Scrolltimer = setInterval(autoScroll, steptTime)
        //左切换
        left.onclick = (e) => {
            clearInterval(Scrolltimer)
            for (let i = 0; i < ctrlCircle.length; i++) {
                ctrlCircle[i].className = "null"
            }
            //底下圆点跟随
            thisCircle = -(initLeft / imgWidth)
            if (thisCircle >= 5) thisCircle = 0
            ctrlCircle[thisCircle].className = "on"
            if (initLeft < (sumImg) * -imgWidth) {
                initLeft = 0
                inner.style.transition = "0s"
            } else {
                inner.style.transition = "1s"
            }
            initLeft = ((initLeft / imgWidth) - 1) * imgWidth
            console.log(initLeft);
            inner.style.left = initLeft + "px"
            // 等待n秒重新启动自动滚动
            var timerClickAfterScroll = setTimeout(() => {
                clearInterval(Scrolltimer)
                inner.style.transition = "1s"


                Scrolltimer = setInterval(autoScroll, steptTime)
            }, clickAfterTime)
        }
        //右切换
        right.onclick = () => {
            clearInterval(Scrolltimer)
            initLeft = ((initLeft / imgWidth) + 1) * imgWidth
            if (initLeft > 0) {
                initLeft = -(imgWidth * (sumImg))
                inner.style.transition = "0s"
            } else {
                inner.style.transition = "1s"
            }
            inner.style.left = initLeft + "px"
            for (let i = 0; i < ctrlCircle.length; i++) {
                ctrlCircle[i].className = "null"
            }
            //底下圆点跟随
            thisCircle = -(initLeft / imgWidth) - 1
            if (thisCircle >= 5) thisCircle = 0
            if (thisCircle <= -1) thisCircle = 4
            ctrlCircle[thisCircle].className = "on"
            // 等待n秒重新启动自动滚动
            var timerClickAfterScroll = setTimeout(() => {
                clearInterval(Scrolltimer)
                if (initLeft == -(sumImg + 1) * imgWidth) {
                    initLeft = 0
                    inner.style.transition = "1s"
                }
                Scrolltimer = setInterval(autoScroll, steptTime)
            }, clickAfterTime)
        }
        circleContaniner.onclick = (e) => {
            //事件冒泡判断是否点击的是原点按钮
            if (e.target.tagName == "SPAN") {
                //清除定时器
                clearInterval(Scrolltimer)
                //拿到点击的index并且切换图片
                initLeft = e.target.getAttribute("index") * -imgWidth
                inner.style.left = initLeft + "px"
                for (let i = 0; i < ctrlCircle.length; i++) {
                    ctrlCircle[i].className = "null"
                }
                //底下圆点跟随
                thisCircle = -(initLeft / imgWidth) - 1
                if (thisCircle >= 5) thisCircle = 0
                ctrlCircle[thisCircle].className = "on"
//n秒以后重新启动定时器
                var timerClickAfterScroll = setTimeout(() => {
                    clearInterval(Scrolltimer)
                    Scrolltimer = setInterval(autoScroll, steptTime)
                }, clickAfterTime)
            }
        }


        const pageContainer = document.getElementById("zy-page-container");

        // 为按钮绑定点击事件

        // 鼠标按下事件
        let isMouseDown = false;
        let pageX, pageY;
        let zhuandong = setInterval(() => {
            pageContainer.style.transform += `rotateX(${1}deg) rotateY(${1}deg)`;
        }, 10)
        pageContainer.addEventListener("mousedown", (event) => {
            isMouseDown = true;
            pageX = event.pageX;
            pageY = event.pageY;
            clearInterval(zhuandong);

        });

        // 鼠标松开事件
        pageContainer.addEventListener("mouseup", () => {
            isMouseDown = false;
            zhuandong = setInterval(() => {
                pageContainer.style.transform += `rotateX(${1}deg) rotateY(${1}deg)`;
            }, 20)
        });

        pageContainer.style.transform += `rotateX(${50}deg) rotateY(${50}deg)`;
        // 鼠标移动事件
        pageContainer.addEventListener("mousemove", (event) => {
            if (!isMouseDown) return;
            const deltaX = event.pageX - pageX;
            const deltaY = event.pageY - pageY;
            pageContainer.style.transform += `rotateX(${deltaY * 0.5}deg) rotateY(${deltaX * -0.5
            }deg)`;
            pageX = event.pageX;
            pageY = event.pageY;
        });
        pageContainer.addEventListener('mouseleave', () => {
            isMouseDown = false;
        })


        const canvas = document.getElementById('zy-myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置canvas的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子对象
        class Particle {
            constructor(x, y, digit) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 10 + 10; // 随机大小，修改范围为10到20
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
                this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
                this.digit = digit; // 数字
            }

            // 更新粒子的位置
            update() {
                this.y += this.velocityY;

                // 当粒子到达画布底部时，重新放置到画布顶部
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }

            // 绘制粒子
            draw() {
                ctx.font = `${this.size}px Arial`;
                ctx.fillStyle = this.color;
                ctx.fillText(this.digit, this.x, this.y);
            }
        }

        // 创建粒子数组
        const particles = [];
        const numParticles = 100;

        // 初始化粒子
        for (let i = 0; i < numParticles; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const digit = Math.floor(Math.random() * 9) + 1; // 生成1到9的数字
            particles.push(new Particle(x, y, digit));
        }

        // 动画循环函数
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }

            requestAnimationFrame(animate);
        }

        // 启动动画
        animate();
    </script>
{% endblock %}
